<template>
	<view class="trendBox" v-if="show">
		<view class="trend-top">
			<!-- 头像/用户名 -->
			<view class="user">
				<image class="img" :src='feedDetail.user.avatar ? feedDetail.user.avatar: "../../static/images/nopic.png"'></image>
				<view class="name">{{feedDetail.user.name}}</view>
			</view>
			<!-- 标题 -->
			<view class="title">{{feedDetail.feed_content}}</view>
			<!-- 图片 -->
			<image class="pic" :src="feedDetail.image" mode=""></image>
			<view class="detail-info">
				<view class="time">
					{{feedDetail.created_at}} 发布
				</view>
				<view class="read-dz">
					<text>{{feedDetail.feed_view_count}} 阅读</text>
					<text style="margin-left: 6rpx;">{{feedDetail.like_count}} 点赞</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!-- 留言栏 -->
		<comment :feedInfo="feedDetail"  type="newFeed"></comment>

	</view>
</template>

<script>
	import filterTime from '@/components/utils/filterTime.js'
	import comment from '@/components/comment/comment.vue'
	export default {
		data() {
			return {
				feedDetail: {},
				feedId: 0,
				show: false
			};
		},
		components:{
			comment
		},
		onLoad(option) {
			this.getFeedsDetail(option.id)
		},
		methods:{
			async getFeedsDetail (id) {
				let { data } = await this.$u.api.getFeedDetail({
					id
				})
				this.feedDetail = {
					...data,
					created_at: filterTime(data.created_at),
					image: this.BaseFileURL+ data.images[0].file
				}
				this.feedId = data.id
				// 保证在数据在请求完毕后,显示组件信息
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.trendBox{
	margin-top: 20rpx;
}
.trend-top{
	padding: 0 25rpx;
	margin-bottom: 20rpx;
	.user{
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		color: "#1F2046";
		font-size: 24rpx;
		.img{
			width: 60rpx;
			height: 60rpx;
		}
		.name{
			padding-left: 10rpx;
		}
	}
	.title{
		margin: 20rpx 0;
	}
	.pic{
		width: 700rpx;
		height: 440rpx;
	}
	.detail-info{
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		color: #888;
		font-size: 24rpx;
	}
}
.line{
	width: 100%;
	height: 30rpx;
	background-color: #f3f3f3;
}
</style>
